import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 把公关数据放到状态管理器
  // state 相当于vue当中data
  // 页面上访问state方式1-this.$store.state.xxx
  //  访问state方式2-通过mapState方式生成计算属性-...mapState(['jerryCount','tomCount'])
  state: {
    tomCount: 0,
    jerryCount: 0
  },
  // 把修改数据方法也放到状态管理
  // mutations相当于vue当中的methods
  // 页面上访问mutation方式1-this.$store.commit('yyy', data)
  mutations: {
    addTom(state, data) {
      // 不是通过this修改数据而是通过state
      state.tomCount += data
    },
    addJerry(state, data) {
      // 不是通过this修改数据而是通过state
      state.jerryCount += data
    }
  },
  // 异步的代码放到actions当中
  // 页面上访问actions方式1-this.$store.dispatch('yyy',data)
  actions: {
    addTomSync(context, data) { // context 等效于 this.$sstore
      setTimeout(() => {
        // 注意在action当中不能直接修改state,修改state只能通过mutations
        context.commit('addTom', data)
      }, 2000)
    }
  },
  // getters 相当于vue当中巨酸属性
  // 页面上访问getters方式1-this.$store.getters.xxx
  getters: {
    showJerryCount(state) {
      return 'jerry' + state.jerryCount
    }
  },
  modules: {
    app,
    settings,
    user
  }
})

export default store
